<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>工作日志</title>
</head>
<script type="text/javascript" th:src="@{/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" th:src="@{/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" th:src="@{/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/bootstrap-table/bootstrap-table.min.css}">
<link type="text/css" rel="stylesheet" th:href="@{/bootstrap-fileinput/css/fileinput.css}">

<script type="text/javascript" th:src="@{/bootstrap-bootbox/bootbox.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/bootstrap-fileinput/js/locales/zh.js}"></script>
<style>
    .hhhh{border:1px solid #26A69A}
    .caption{border:1px solid #26A69A}
</style>
<body>

<div class="col-md-4 col-sm-12" >
    <div class="hhhh" >
        <div class="portlet box purple">
            <div class="portlet-title">
                <div class="caption"  style="background:#26A69A; color:#FFF">
                    <i class="fa fa-edit"></i>写工作日志
                </div>
            </div>
            <div class="portlet-body">
                <form class="inline-form" name="form1" id="form1" novalidate="novalidate">
                    工作总结
                    <div class="form-group" style="width:100%;">
                        <textarea rows="5" class="form-control" name="fcontent" id="fcontent" placeholder="请在此写工作总结..."></textarea>
                    </div>
                    <div id="attach" style="margin-bottom:10px;">
                    </div>
                    工作计划
                    <div class="form-group" style="width:100%;">
                        <textarea rows="5" class="form-control" name="fplan" id="fplan" placeholder="下一步工作计划..."></textarea>
                    </div>

                    <br>
                    <a href="javascript:bcGzrz();" id="save" class="btn purple">
                        保存工作日志 </a> <a href="javascript:void(0)">我的日志</a>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="col-md-6 col-sm-12">
    <div class="timeline" id="gzrz">
        <div class="timeline-item">
            <div class="dateLine" style="height: 40px;"></div>

            <div >
                <img style="width:50px; height:50px; border-radius:100%; overflow:hidden;" src="images/bg_main.jpg" alt="只是圆形图片" />
            </div>
            <div class="timeline-body">
                <div class="timeline-body-arrow"></div>
                <div class="timeline-body-head">
                    <div class="timeline-body-head-caption">
                        <label class="timeline-body-title">唐长安</label>
                        <span class="timeline-body-time font-grey-cascade"></span>
                    </div>
                </div>
                <div class="timeline-body-content">
                    <span class="font-grey-cascade" id="FContent4800566579210001">产单！</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    window.onload = function(){
        getGzrz()
    }
    function bcGzrz(){
        //新增
            $.ajax({
                url:"/gzrz/addGzrz",
                data:$("#form1").serialize(),
                success:function(){
                    alert("保存成功")

                    location.reload();
                }
            })
    }

    function getGzrz() {
        $.ajax({
            url:"/gzrz/getGzrz",
            type:"get",
            dataType: 'json',
            success:function(data){
                console.log(data)
                var op = '';
                for (var i = 0; i <data.length ; i++) {
                    op +='        <div class="timeline-item">\n' +
                        '            <div class="dateLine" style="height: 50px;"></div>\n' +
                        '\n' +
                        '            <div style="width:50px; height:50px; border-radius:100%; overflow:hidden;">\n' +
                        '                <img src="'+data[i].uimg+'" alt="只是圆形图片" />\n' +
                        '            </div>\n' +
                        '            <div class="timeline-body">\n' +
                        '                <div class="timeline-body-arrow"></div>\n' +
                        '                <div class="timeline-body-head">\n' +
                        '                    <div class="timeline-body-head-caption">\n' +
                        '                        <label class="timeline-body-title">'+data[i].name+'</label>\n' +
                        '                        <span class="timeline-body-time font-grey-cascade"></span>\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '                <div class="timeline-body-content">\n' +
                        '                    <span class="font-grey-cascade" id="FContent4800566579210001">'+data[i].fcontent+'</span>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '        </div>'
                }

                $("#gzrz").append(op);
            }
        })
    }
</script>
</html>